<template>
	<div>
		<el-card class="layout-search-card mb-4" shadow="never" :body-style="{ paddingBottom: '0' }">
			<el-form :model="state.queryParams" ref="queryForm" :inline="true">
				<el-form-item label="访问方式：">
					<el-select v-model="state.queryParams.type" placeholder="请选择请求方式" class="w-[180px]">
						<el-option v-for="item in visitType" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="操作人：">
					<el-input v-model="state.queryParams.admin_name" placeholder="请输入操作人" class="w-[180px]" />
				</el-form-item>
				<el-form-item label="来源IP：">
					<el-input v-model="state.queryParams.ip" placeholder="请输入来源IP" class="w-[180px]" />
				</el-form-item>
				<el-form-item label="访问链接：">
					<el-input v-model="state.queryParams.url" placeholder="请输入访问链接" class="w-[180px]" />
				</el-form-item>
				<el-form-item label="时间范围：">
					<datePicker v-model:dateTime="state.queryParams.create_time" :isPickerOptions="true" />
				</el-form-item>
				<el-form-item>
					<el-button-group>
						<el-button type="primary" icon="ele-Search" @click="searchTable"> 查询 </el-button>
						<el-button icon="ele-Refresh" @click="resetQuery" class="ml15"> 重置 </el-button>
					</el-button-group>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="layout-table-card" shadow="never">
			<el-table :data="state.tableList" v-loading="state.loading" style="width: 100%">
				<el-table-column prop="id" label="ID" width="120" />
				<el-table-column prop="action" label="操作" show-overflow-tooltip>
					<template #default="{ row }">
						{{ row.auth_menu?row.auth_menu:row.action }}
					</template>
				</el-table-column>
				<el-table-column prop="admin_name" label="操作人" show-overflow-tooltip></el-table-column>
				<el-table-column prop="url" label="访问链接" show-overflow-tooltip></el-table-column>
				<el-table-column prop="type" label="请求方式" show-overflow-tooltip></el-table-column>
				<el-table-column prop="ip" label="来源IP" show-overflow-tooltip></el-table-column>
				<el-table-column prop="create_time" label="创建时间" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="100" fixed="right">
					<template #default="{ row }">
						<div class="flex">
							<el-button type="primary" v-auth="'setting/log/detail'" link @click="handleDetail(row)"> 详情 </el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-model="state" @tableChange="getTableList" />
		</el-card>
		<DetailDialog v-if="showDialog" ref="detailRef" @submit="getTableList" @close="showDialog = false" />
	</div>
</template>

<script setup lang="ts" name="sysLog">
import { reactive, onMounted, ref, nextTick } from 'vue';
import { systemLogLists } from '/@/api/setting/system';
import { usePage } from '/@/hooks/usePage';
import DetailDialog from '/@/views/sys/log/component/detail.vue';

const detailRef = ref();

const showDialog = ref(false);

// 定义列表
const state = reactive<TableDataState>({
	loading: false,
	tableList: [],
	queryParams: {
		admin_name: '',
		url: '',
		ip: '',
		type: '',
		create_time: '',
	},
	tableParams: {
		page_num: 1,
		page_limit: 15,
		page_total: 0 as any,
	},
});

const { getTableList, searchTable, resetQuery } = usePage({ tableData: state, apiData: systemLogLists });

// 访问方式
const visitType = ref<Array<any>>([
	{
		label: '全部',
		value: '',
	},
	{
		label: 'GET',
		value: 'GET',
	},
	{
		label: 'POST',
		value: 'POST',
	},
	{
		label: 'DELETE',
		value: 'DELETE',
	},
]);

const handleDetail = async (row: any) => {
	showDialog.value = true;
	nextTick(() => {
		detailRef.value?.setFormData(row,function(){
			detailRef.value?.open();
		});
	});
};

// 页面加载时
onMounted(() => {
	getTableList();
});
</script>

<style scoped lang="scss"></style>
